import React, { Component, createRef } from 'react'
import {
  Card,
  Button, 
  Row,
  Col,
  Statistic,
  Calendar,
  Icon
} from 'antd'
import echarts from 'echarts'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

import {
  getArticleAmount,
  getArticleCount
} from '../../api'

import './dashboard.less'

import moment from 'moment';
import 'moment/locale/zh-cn';


// const overViewColors = [

// ]

const chartLayout = {
  sm: {
    span: 24
  },
  lg: {
    span: 12
  }
}

const mapState = state => {
  return {
    lang: state.lang.locale
  }
}

@withRouter
@connect(mapState)

class Dashboard extends Component {
  constructor(){
    super()
    this.articleAmount = createRef()
    this.articleCount  = createRef()
  }

  // 初始化文章浏览量
  initArticleChart = () => {
    this.articleAmountChart = echarts.init(this.articleAmount.current)

    getArticleAmount()
      .then(res => {
        var option = {
          title: {
            text: '文章浏览量'
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.amount.map(item => {
                return item.month
              })
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: res.amount.map(item => {
                return item.value
              }),
              type: 'line',
              areaStyle: {}
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        this.articleAmountChart.setOption(option);
      })
  }

  // 初始化文章数量
  initArticleCount = () => {
    this.articleCountChart = echarts.init(this.articleCount.current)

    getArticleCount()
      .then(res => {
        var option = {
          title: {
            text: '文章数量'
          },
          xAxis: {
              type: 'category',
              // boundaryGap: false,
              data: res.amount.map(item => {
                return item.month
              })
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: res.amount.map(item => {
                return item.value
              }),
              type: 'line',
              smooth: true
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        this.articleCountChart.setOption(option);
      })
  }

  componentDidMount() {
    this.initArticleChart()
    this.initArticleCount()
  }

  onPanelChange = (value, mode) => {
    console.log(value, mode);
  }

  render() {
    return (
      <>
        <Card
          title="概览" 
          bordered={false}
          extra={<Button >取消</Button>} 
        >
          <Row gutter={16}>
            <Col className="gutter-row" span={6}>
              <div className="qf-gutter-box" >
                <Statistic title="注册用户" value={112893} prefix={<Icon type="user" />} />
              </div>
            </Col>
            <Col className="gutter-row" span={6}>
              <div className="qf-gutter-box" >
                <Statistic title="发表文章" value={3024528} prefix={<Icon type="edit" />} />
              </div>
            </Col>
            <Col className="gutter-row" span={6}>
              <div className="qf-gutter-box" >
                <Statistic title="点赞" value={718028} prefix={<Icon type="like" />} />
              </div>
            </Col>
            <Col className="gutter-row" span={6}>
              <div className="qf-gutter-box" >
                <Statistic title="评论" value={571208} prefix={<Icon type="form" />} />
              </div>
            </Col>
          </Row>
        </Card>
        <Card
          title="数据可视化" 
          bordered={false}
          extra={<Button >取消</Button>} 
        >
          <Row gutter={16}>
            <Col className="gutter-row" { ...chartLayout }>
              <div style={{height: '300px'}} ref={this.articleAmount} />
            </Col>
            <Col className="gutter-row" { ...chartLayout }>
              <div style={{height: '300px'}} ref={this.articleCount} />
            </Col>
          </Row>
          
        </Card>
        <Calendar 
          onPanelChange={this.onPanelChange} 
          locale={{lang: {locale: 'zh_CN' }}}
          value={ moment() }
         />
      </>
    )
  }
}

export default Dashboard